﻿<template>
    <div style="height:100%">
        <!--表2季度生产情况T_MulQuartProduc-->
        <div class="divSearch" style="padding: 6px;">
            <Row>
                <Col span="24" class="col-margin"> 填报年度：
                <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                    <Option value="">全部</Option>
                    <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select> 时间周期：
                <Select v-model="searchModel.TimesType" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                    <Option value="">全部</Option>
                    <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select>
                <Button icon="ios-search" type="ghost" @click="getPageData()" style="margin-left: 5px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff;border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
                    查询
                </Button>
                </Col>
            </Row>
        </div>
        <Row style="padding:10px;">
            <Col span="24" class="col-margin">
            <Table size="small" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
        </Row>
        <Row>
            <Col span="24" class="dataTable">
            <Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer='' @on-page-size-change="getPageSize" show-total="" show-elevator=""></Page>
            </Col>
        </Row>
        <Modal v-model="showType" :mask-closable="false" width='1500'>
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">套种作物收益情况填报</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size="25"></Icon>
            </p>
            <Row style="padding:2px 0 5px; 0">
                <Col>
                <Button icon="plus" type="ghost" size="small" @click="addItem">新增</Button>
                </Col>
            </Row>
            <table class="reptable" style="width:100%">
                <tr>
                    <th rowspan="2">农户姓名</th>
                    <th rowspan="2">套种作物名称</th>
                    <th rowspan="2">播种时间</th>
                    <th rowspan="2">收获时间</th>
                    <th rowspan="2">套种面积
                        <br />(亩)</th>
                    <th colspan="6">套种支出</th>
                    <th colspan="2">套种收入</th>
                    <th rowspan="2">操作</th>
                </tr>
                <tr>
                    <th>用种量
                        <br />(公斤/亩)</th>
                    <th>种子价格
                        <br />(元/公斤)</th>
                    <th>因套种增加的化肥用量
                        <br />(公斤/亩)</th>
                    <th>化肥价格
                        <br />(元/公斤)</th>
                    <th>全生育期用工量
                        <br />(个/亩)</th>
                    <th>当地工价
                        <br />(元/个)</th>
                    <th>收获产量
                        <br />(公斤/亩)</th>
                    <th>销售单价
                        <br />(元/公斤)</th>
                </tr>
                <tr v-for="dataitem in datalist">
                    <td style="text-align:left;width:5%;">
                        <Input style="display:none;" v-model="dataitem.Id"></Input>
                        <Input style="display:none;" v-model="dataitem.ReportId"></Input>
                        <Input v-model="dataitem.HouseName"></Input>
                    </td>
                    <td style="text-align:right;width:6%;">
                        <!--套种作物名称-->
                        <Input v-model="dataitem.InterCropName"></Input>
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.SowTime"></Input>
                        <!--播种时间-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.HarvestTime"></Input>
                        <!--收获时间-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.InterArea"></Input>
                        <!--套种面积-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.UseSeed"></Input>
                        <!--用种量-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.SeedPrice"></Input>
                        <!--种子价格-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.AddFertili"></Input>
                        <!--化肥量-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.FertilizerPrice"></Input>
                        <!--化肥价格-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.FullGrowEmploy"></Input>
                        <!--全生育期用工量-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.LocalWages"></Input>
                        <!--当地工价-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.HarvestYield"></Input>
                        <!--收获产量-->
                    </td>
                    <td style="text-align:right;width:6%;">
                        <Input v-model="dataitem.SalePrice"></Input>
                        <!--销售单价-->
                    </td>
                    <td style="text-align:center;width:2%;">
                        <Button type="ghost" size="small" icon="ios-trash-outline" style="color:#FF0000" @click="delOp(dataitem)">
                        </Button>
                    </td>
                </tr>
            </table>
            <div style="text-align:right;padding-top:10px">
                <Button type="primary" @click="save()">保存</Button>
                <Button type="ghost" @click="cancel()" style="margin-left: 8px">取消</Button>
            </div>
            <div slot="footer">
                <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
                    备注：1、用工量含蚕农自己投工量；
                    <br/><br/>2、在一个养蚕周期内，被调查对象在桑园内进行的套种作物均要进行问卷调查。
                    <br/><br/>3、销售单价为套种作物成熟季节，市场上的卖价。
                    <br/><br/>4、平均亩桑套种效益=收获产量*销售单价-（用种量*种子价格+因套种增加的化肥用量*化肥价格+全生育期用工量*当地工价）
                </Alert>
            </div>
        </Modal>
        <Modal v-model="ViewShow" :mask-closable="false" width="1200">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">套种作物收益情况填报</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size="25"></Icon>
            </p>
            <table class="reptable" style="width:100%">
                <tr>
                    <th rowspan="2">农户姓名</th>
                    <th rowspan="2">套种作物名称</th>
                    <th rowspan="2">播种时间</th>
                    <th rowspan="2">收获时间</th>
                    <th rowspan="2">套种面积
                        <br />(亩)</th>
                    <th colspan="6">套种支出</th>
                    <th colspan="2">套种收入</th>
                    <th rowspan="2">平均亩桑套种效益（元/亩）</th>
                </tr>
                <tr>
                    <th>用种量
                        <br />(公斤/亩)</th>
                    <th>种子价格
                        <br />(元/公斤)</th>
                    <th>因套种增加的化肥用量
                        <br />(公斤/亩)</th>
                    <th>化肥价格
                        <br />(元/公斤)</th>
                    <th>全生育期用工量
                        <br />(个/亩)</th>
                    <th>当地工价
                        <br />(元/个)</th>
                    <th>收获产量
                        <br />(公斤/亩)</th>
                    <th>销售单价
                        <br />(元/公斤)</th>
                </tr>
                <tr v-for="dataitem in datalist" style="height:40px;">
                    <td style="text-align:left;width:5%;padding: 4px 7px;">
                        {{dataitem.HouseName}}
                        <!--农户姓名-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.InterCropName}}
                        <!--套种作物名称-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.SowTime}}
                        <!--播种时间-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.HarvestTime}}
                        <!--收获时间-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.InterArea}}
                        <!--套种面积-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.UseSeed}}
                        <!--用种量-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.SeedPrice}}
                        <!--种子价格-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.AddFertili}}
                        <!--化肥量-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.FertilizerPrice}}
                        <!--化肥价格-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.FullGrowEmploy}}
                        <!--全生育期用工量-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.LocalWages}}
                        <!--当地工价-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.HarvestYield}}
                        <!--收获产量-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{dataitem.SalePrice}}
                        <!--销售单价-->
                    </td>
                    <td style="text-align:right;width:6%;padding: 4px 7px;">
                        {{(dataitem.SalePrice*dataitem.HarvestYield)-(dataitem.UseSeed*dataitem.SeedPrice+dataitem.AddFertili*dataitem.FertilizerPrice+dataitem.FullGrowEmploy*dataitem.LocalWages)}}
                    </td>
                </tr>
            </table>
            <div slot="footer">
                <Alert style="margin-top:5px;text-align:left;font-size:14px;" banner type="error">
                    备注：1、用工量含蚕农自己投工量；
                    <br/><br/>2、在一个养蚕周期内，被调查对象在桑园内进行的套种作物均要进行问卷调查。
                    <br/><br/>3、销售单价为套种作物成熟季节，市场上的卖价。
                    <br/><br/>4、平均亩桑套种效益=收获产量*销售单价-（用种量*种子价格+因套种增加的化肥用量*化肥价格+全生育期用工量*当地工价）
                </Alert>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    data() {
        const validateNumber = (rule, value, callback) => {
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
            } else {
                if (value < 18) {
                    callback(new Error('必须年满18岁'));
                } else {
                    callback();
                }
            }
        };
        return {
            datalist: [],
            datas: {}, //table数据对象
            dataIds: [],
            CutMethodList: this.GetGroupDict("LoggingType"),
            MulLandList: this.GetGroupDict("MulLandType"),
            TableCodeList: this.GetGroupDict("ReportTableName"), //表名称
            CreateYearList: this.GetGroupDict("ReportYear"), //上报年份
            CycleList: this.GetGroupDict("ReportCycle"), //周期
            pageSizeOpts: [20, 40, 50], //默认分页最大设置
            showType: false, //编辑框弹出状态
            ViewShow: false,
            selectTabName: '',
            ReportId: '',
            TabTitleList: [], //tab选项卡列表
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                ReportCode: 'MulCropIncome',
                FillInYear: '',
                TimesType: '',
                AreaCode: '',
                PageNumber: 1,
                PageSize: 20
            },
            ctx: this, //table数据上下文
            columnsList: [{
                title: "报表名称",
                key: "ReportName",
            },
            {
                title: "填报年度",
                key: "FillInYearName",
            },
            {
                title: "属行政区划",
                key: "AreaCodeName",
            },
            {
                title: "填报周期",
                key: "TimesTypeName",
            },
            {
                title: "状态",
                key: "StatusName",
                render: (h, params) => {
                    switch (params.row.Status * 1) {
                        case 0: //审核未通过
                            return h('span', { class: { Error: true } }, params.row.StatusName);
                        case 1: //未填写
                            return h('span', { class: { NoReport: true } }, params.row.StatusName);
                        case 2: //已填写
                            return h('span', { class: { AlreadyReport: true } }, params.row.StatusName);
                        case 3: //已上报
                            return h('span', { class: { UpReport: true } }, params.row.StatusName);
                        case 4: //审核通过
                            return h('span', { class: { Success: true } }, params.row.StatusName);
                        case 5: //锁定
                            return h('span', { class: { error: true } }, params.row.StatusName);
                        default:
                            return h('span', { class: { Default: true } }, params.row.StatusName);
                    }
                }
            },
            {
                title: "新增时间",
                key: "StrAddTime",
            },
            {
                title: "填报时间",
                key: "StrUpdateTime",
            },
            {
                title: "操作",
                key: "Id",
                width: 250,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            class: { ieditColor: true },
                            props: {
                                type: 'ghost', size: 'small', icon: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.showInfo(params.row.Id, params.row.ReportCode)
                                }
                            }
                        }, '查看'),
                        h('Button', {
                            class: { irefreshColor: true },
                            props: {
                                type: 'ghost', size: 'small', icon: 'ios-compose', disabled: params.row.Status > 2
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.editInfo(params.row.Id, params.row.ReportCode)
                                }
                            }
                        }, '填报'),
                        h('Button', {
                            class: { ieditColor: true },
                            props: {
                                type: 'ghost', size: 'small', icon: 'upload', disabled: params.row.Status != 2
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.upReport(params.row.Id)
                                }
                            }
                        }, '上报'),
                    ])
                }
            }
            ],
            clientHeight: window.innerHeight - 260, //表格默认高度
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 260;
            })()
        };
    },
    methods: {
        addItem() {
            var model = { //编辑模型
                Id: 0,
                ReportId: '',
                SiteInter: '',
                InterCropName: '',
                SowTime: '',
                HarvestTime: '',
                InterArea: '',
                SeedPrice: '',
                UseSeed: '',
                AddFertili: '',
                fertilizerPerMu: '',
                LocalWages: '',
                FullGrowEmploy: '',
                HarvestYield: '',
                SalePrice: '',
                AveIncome: '',
            };
            model.ReportId = this.ReportId;
            model.Id = this.datalist.length + 1;
            this.datalist.push(model);
        },
        delOp(m) {
            for (var i = 0; i < this.datalist.length; i++) {
                if (this.datalist[i].Id == m.Id) {
                    this.datalist.splice(i, 1);
                }
            }
        },
        upReport(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>是否确认上报？</p>',
                onOk: () => {
                    var model = new Object();
                    model.Id = id;
                    model.reportType = '3';
                    model.strMsg = '';
                    this.$http.post("Report/PostUpStatus", model).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({
                                    title: '已上报！',
                                    desc: false
                                });
                                self.getPageData();
                            } else {
                                self.$Modal.error({
                                    title: "提示信息",
                                    content: "数据删除失败!!!"
                                });
                            }
                        }
                    );
                }
            });
        },
        getTab(name) {
            this.selectTabName = name;
        },
        //查看报表
        showInfo(id, reportCode) {
            var self = this;
            this.$http.get("Report", {
                params: {
                    id: id,
                    reportCode: reportCode
                }
            }).then( //获取数据编辑项的值
                function (res) {
                    switch (res.data.list.status) {
                        case 1:
                            self.datalist = res.data.list.model;
                            self.ViewShow = true;
                            break;
                        case 0:
                            self.$Modal.error({
                                title: "提示信息",
                                content: "编辑数据加载失败!!!"
                            });
                            break;
                        case -1:
                            self.$Modal.error({
                                title: "提示信息",
                                content: "编辑数据加载失败!!!"
                            });
                            break;
                    }
                }
                );
        },
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getPageData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getPageData();
        },
        //获取this.datas: {},//table数据对象
        getPageData() {
            var self = this;
            var user = this.GetlocaStorage("CSuserinfo");
            this.searchModel.AreaCode = user.AreaCode;
            self.$http.post('Report/PostPageList', this.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data;
                } else {
                    self.$Modal.error({
                        title: '提示信息',
                        content: res.data.message
                    });
                }
            });
        },
        //编辑获取对象传入id
        editInfo(id, reportCode) { //编辑
            this.ReportId = id;
            var self = this;
            this.$http.get("Report", {
                params: {
                    id: id,
                    reportCode: reportCode
                }
            }).then( //获取数据编辑项的值
                function (res) {
                    switch (res.data.list.status) {
                        case 1:
                            self.datalist = res.data.list.model;
                            self.modalShow();
                            break;
                        case 0:
                            self.$Modal.error({
                                title: "提示信息",
                                content: "编辑数据加载失败!!!"
                            });
                            break;
                        case -1:
                            self.$Modal.error({
                                title: "提示信息",
                                content: "编辑数据加载失败!!!"
                            });
                            break;
                    }
                }
                );
        },
        checkItem(datas, ItemCode) {
            var res = false;
            for (var i = 0; i < datas.length; i++) {
                if (datas[i].ItemCode == ItemCode) {
                    res = true;
                }
            }
            return res;
        },
        //保存方法
        save() {
            var self = this;
            this.$http.post('MulCropIncome', self.datalist).then(
                function (res) {
                    if (res.data.status == 1) {
                        self.getPageData(); //读取分页数据
                        self.modalHide(); //关闭modal
                        self.datalist = [];
                        self.$Notice.success({
                            title: '保存成功！',
                            desc: false
                        });
                    } else {
                        self.$Modal.warning({
                            title: "提示信息",
                            content: "更新失败,请与管理员联系!"
                        });
                    }
                });
        },
        //编辑框打开
        modalShow() {
            this.showType = true;
        },
        //编辑框关闭
        modalHide() {
            this.showType = false;
        },
        //取消方法
        cancel() {
            this.showType = false; //关闭modal
            this.TabTitleList = [];
        },
        //重置model
        restModel(modelname) {
            this.$refs[modelname].resetFields(); //重置model
        }
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.getPageData();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>